<template>
	<view class="integral-content">
		<view class="balance-panel">
			<view class="left">
				<view class="title"> {{$t('pledge.tokenAmount')}}</view>
				<view class="number">{{user.coinAmount}}</view>
			</view>
			<view class="right">
				<view class="title">{{$t('pledge.amount')}}（$）</view>
				<view class="number">{{user.amount}}</view>
			</view>
		</view>

		<view class="card">
			<u-tabs lineWidth="80" :list="tabList" @click="tabChange" lineColor="#F6DDA4"
				inactiveStyle="font-size: 15px;color: #9c9c9c;font-weight: 500;"
				activeStyle="font-size: 15px;color: white;font-weight: 500;">
			</u-tabs>
		
			<view class="title">{{title}}</view>
			<input type="number" class="input" v-model="amount"></input>
			<view class="tip">{{$t('home.lpExchange.tip')}}{{user.coinPrice}}$ </view>
			<button class="btn" @click="submit">{{$t('common.submit')}}</button>
		</view>
	</view>
</template>

<script>
	import {
		getMineInfo,
		coinExchange
	} from "@/api/system/user.js"
	export default {
		data() {
			return {
				amount: '',
				user: {},
				tabList: [{
						name: this.$t('home.lpExchange.exchangeBalance'),
					}
					// , {
					// 	name: this.$t('home.lpExchange.exchangeCoin'),
					// },
				],
				title: this.$t('home.lpExchange.pleaseEnterLmp'),
				tip: this.$t('home.lpExchange.tip'),
				currentTab: '0'
			};
		},
		onLoad: function() {
			this.getMineInfoFun();
		},
		onNavigationBarButtonTap(e) {
			//e.index 如果是俩图标的话，index然后的0 或者1  就知道点击的哪个
			uni.navigateTo({
				url: '/pages/mine/record/integral-record'
			})
		},
		methods: {
			getMineInfoFun() {
				getMineInfo().then(rsp => {
					if (rsp.code == 200) {
						this.user = rsp.data;
						
					}
				});	
			},
			submit() {
				var exBalance = (this.currentTab == '0');
				if (!this.amount) {
					return;
				}
				if (exBalance && this.amount > this.user.lmpAmount) {
					this.$u.toast(this.$t('home.lpExchange.insufficientLmp'))
					return;
				}
				// if (exBalance && this.amount < 1) {
				// 	//积分兑换余额，最低兑换1 
				// 	this.$u.toast(this.$t('home.exchange.lowPoints'))
				// 	return;
				// }
				//
				//todo 如何是购买LMP 应该是另外一套逻辑
				if (!exBalance && this.amount > this.user.amount) {
					this.$u.toast(this.$t('home.lpExchange.insufficientBalance'))
					return;
				}
				
				this.lmpExchangeFun();
			},
			lmpExchangeFun() {
				coinExchange({
					"amount": this.amount,
					"type": this.currentTab
				}).then(rsp => {
					if (rsp.code == 200) {
						this.$u.toast(this.$t('home.lpExchange.exchangeSuccess'))
					}
					this.amount = '';
					this.getMineInfoFun();
				})
			},
			tabChange(item) {
				this.currentTab = item.index;
				if (item.index == '0') {
					this.title = this.$t('home.lpExchange.pleaseEnterLmp')
				} else {
					this.title = this.$t('home.lpExchange.pleaseEnterBalance')
				}
			}
		}
	}
</script>

<style lang="scss">
	
	page {
		background-color: $uni-color-bg;
	}
	
	.integral-content {
	
		box-sizing: border-box;
		overflow: hidden;
		padding: 10px 12px;
	
		.balance-panel {
			box-sizing: border-box;
			height: 100px;
			border-radius: 10px;
			overflow: hidden;
			padding: 16px 20px;
			background-color: $uni-color-primary;
			color: $uni-color-box;
			display: flex;
	
			.left {
				flex: 1;
	
				.title {
					font-size: 14px;
					font-weight: 500;
				}
	
				.number {
					margin-top: 16px;
					font-size: 22px;
					font-weight: 600;
				}
			}
	
			.right {
				flex: 1;
	
				.title {
					font-size: 14px;
					font-weight: 500;
				}
	
				.number {
					margin-top: 16px;
					font-size: 22px;
					font-weight: 600;
				}
			}
	
	
	
		}
	
		.card {
			background-color: $uni-color-box;
			box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, .12);
			border-radius: 10px;
			margin-top: 10px;
			padding: 16px 20px;
			padding-top: 7px;
	
			.title {
				margin-top: 20px;
				color: $uni-color-subfont;
				font-size: 14px;
			}
	
			.input {
				border-radius: 40px 40px 40px 40px;
				height: 40px;
				border: 2px solid $uni-color-primary;
				text-align: center;
				margin-top: 10px;
				margin-bottom: 14px;
				font-size: 16px;
				color: white;
				font-weight: 500;
			}
	
			.tip {
				color: white;
				font-size: 14px;
				margin: 10px 0;
			}
	
			.btn {
				color: $uni-color-box;
				background-color: $uni-color-primary;
				border-color: $uni-color-primary;
				border-width: 1px;
				border-top-right-radius: 100px;
				border-top-left-radius: 100px;
				border-bottom-left-radius: 100px;
				border-bottom-right-radius: 100px;
			}
		}
	
	}
</style>